<!--
 * @Author: FengTeng
 * @Date: 2021-02-15 17:53:42
 * @LastEditTime: 2021-02-20 11:09:17
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\components\table\products-table\ProductsTable.vue
-->
<template>
  <div class="products-table">
    <spa-table
      :tableConfig="tableConfig"
      :tableData="tableData"
      :columnSet="columnSetFilter"
      @page-change="handlePageChange($event)"
    >
      <el-table-column
        v-for="column in customColumnSet"
        :prop="column.prop"
        :label="column.label"
        :width="column.width ? column.width : ''"
        :align="column.align ? column.align : ''"
        :key="column.prop"
      >
        <template slot-scope="scope">
          <div class="custom-table-slot" @click="handleCellClick(scope.row)">
            {{ scope.row.option }}
          </div>
        </template>
      </el-table-column>
    </spa-table>
  </div>
</template>

<script>
import SpaTable from "@/components/spa-table/SpaTable.vue";
export default {
  name: "ProductsTable",
  components: {
    SpaTable
  },
  props: {
    tableConfig: {
      type: Object,
      default: () => {
        return {};
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    columnSet: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      columnSetFilter: [],
      customColumnSet: []
    };
  },
  created() {
    this.columnSet.forEach(item => {
      if (item.customSlot !== "customSlot") {
        this.columnSetFilter.push(item);
      } else {
        this.customColumnSet.push(item);
      }
    });
  },
  methods: {
    handlePageChange(event) {
      this.$emit("page-change", event);
    },
    handleCellClick(row) {
      this.$emit("selected-change", row);
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
